<template>
  <div
    class="cc-window"
    :class="{
      showFront: cloneWindowwManage.currentWindow == dialogId,
      'window-max-class': nowIsMax,
      'window-min-class': nowIsMin,
    }"
    ref="windowRef"
    v-if="show"
    :id="dialogId"
    @mousedown="selectThis"
  >
    <div
      class="header-box"
      @mousedown.prevent="moveStart($event)"
      v-if="showHeader"
    >
      <div class="header-icon"></div>
      <slot name="title">
        <div class="title">弹窗</div>
      </slot>
      <div class="header-btns">
        <i
          v-if="canMin"
          class="el-icon-minus"
          @mousedown.stop
          @click="minHandler"
        ></i>
        <i
          v-if="canMax"
          class="el-icon-full-screen"
          @mousedown.stop
          @click="maxHandler"
        ></i>
        <i
          v-if="canClose"
          class="el-icon-close"
          @mousedown.stop
          @click="closeHandler"
        ></i>
      </div>
    </div>
    <slot name="content">
      <div class="content">内容</div>
    </slot>
    <div
      class="scale-line top"
      @mousedown.prevent="scaleStart($event, 'top')"
    ></div>
    <div
      class="scale-line bottom"
      @mousedown.prevent="scaleStart($event, 'bottom')"
    ></div>
    <div
      class="scale-line left"
      @mousedown.prevent="scaleStart($event, 'left')"
    ></div>
    <div
      class="scale-line right"
      @mousedown.prevent="scaleStart($event, 'right')"
    ></div>
    <div class="corner t-l"></div>
    <div class="corner t-r"></div>
    <div class="corner b-l"></div>
    <div class="corner b-r"></div>
  </div>
</template>

<script>
import windowManage from "../../assets/js/windowManage";
export default {
  props: {
    // 初始化样式
    initStyle: {
      type: Object,
      default: () => {
        return {
          width: "400px",
          height: "700px",
          left: "10px",
          top: "60px",
        };
      },
    },
    // 弹窗宽度的范围 [300,600]
    widthSize: {
      type: Array,
      default: () => [],
    },
    // 弹窗高度的范围 [300,600]
    heightSize: {
      type: Array,
      default: () => [],
    },
    // 是否显示头部
    showHeader: {
      type: Boolean,
      default: true,
    },
    // 是否可以缩放
    canScale: {
      type: Boolean,
      default: true,
    },
    // 是否可以拖动
    canDrag: {
      type: Boolean,
      default: true,
    },
    // 是否可以最小化
    canMin: {
      type: Boolean,
      default: true,
    },
    // 是否可以最大化（全屏）
    canMax: {
      type: Boolean,
      default: true,
    },
    // 是否可以关闭
    canClose: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      show: false,
      startX: 0,
      startY: 0,
      startWidth: 0,
      startHeight: 0,
      scaleDirection: "",
      dialogId: "",
      cloneWindowwManage: {
        currentWindow: "", // window对象上存储的当前置顶的弹出框ID
      },
      nowIsMax: false,
      nowIsMin: false,
    };
  },
  created() {
    windowManage.idStart++;
    this.cloneWindowwManage = windowManage;
    this.dialogId = `dialog_${windowManage.idStart}`;
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    /**根据传递进来的参数 初始化弹窗的所有样式 */
    initWindowStyle() {
      if (!this.showHeader) {
        this.$el.style.setProperty("--header-height", "0px");
      }
      this.$el.style.setProperty("--window-width", this.initStyle.width);
      this.$el.style.setProperty("--window-height", this.initStyle.height);
      this.initStyle.top &&
        this.$el.style.setProperty("--window-top", this.initStyle.top);
      this.initStyle.left &&
        this.$el.style.setProperty("--window-left", this.initStyle.left);
      if (this.initStyle.right) {
        this.$el.style.setProperty("--window-right", this.initStyle.right);
        this.$el.style.setProperty("--window-left", "unset");
      }
      if (this.initStyle.bottom) {
        this.$el.style.setProperty("--window-bottom", this.initStyle.bottom);
        this.$el.style.setProperty("--window-top", "unset");
      }
    },
    /**选中当前弹出框*/
    selectThis() {
      this.cloneWindowwManage.currentWindow = this.dialogId;
    },
    /**缩放开始 */
    scaleStart(e, direction) {
      if (!this.canScale) return;
      this.scaleDirection = direction;
      this.startX = e.clientX;
      this.startY = e.clientY;
      this.startWidth = this.$el.offsetWidth;
      this.startHeight = this.$el.offsetHeight;
      this.$root.$el.addEventListener("mousemove", this.scaleHandler);
      this.$root.$el.addEventListener("mouseup", this.scaleEnd);
      this.$root.$el.style.cursor = ["right", "left"].includes(direction)
        ? "ew-resize"
        : "ns-resize";
    },
    scaleHandler(e) {
      let map = { right: 1, left: -1, top: -1, bottom: 1 };
      if (["right", "left"].includes(this.scaleDirection)) {
        let distance = (e.clientX - this.startX) * map[this.scaleDirection];
        if (this.startWidth + distance <= 50) return;
        if (this.widthSize.length == 2) {
          if (
            this.startWidth + distance <= this.widthSize[0] ||
            this.startWidth + distance >= this.widthSize[1]
          )
            return;
        }
        this.$el.style.setProperty(
          "--window-width",
          `${this.startWidth + distance}px`
        );
        if (this.scaleDirection === "left") {
          this.$el.style.setProperty(
            "--window-left",
            `${this.startX - distance}px`
          );
        }
      }

      if (["top", "bottom"].includes(this.scaleDirection)) {
        let distance = (e.clientY - this.startY) * map[this.scaleDirection];
        if (this.startHeight + distance <= 80) return;
        if (this.heightSize.length == 2) {
          if (
            this.startHeight + distance <= this.heightSize[0] ||
            this.startHeight + distance >= this.heightSize[1]
          )
            return;
        }
        this.$el.style.setProperty(
          "--window-height",
          `${this.startHeight + distance}px`
        );
        if (this.scaleDirection === "top") {
          this.$el.style.setProperty(
            "--window-top",
            `${this.startY - distance}px`
          );
        }
      }
      this.$emit("resize");
    },
    scaleEnd() {
      this.$root.$el.removeEventListener("mousemove", this.scaleHandler);
      this.$root.$el.removeEventListener("mouseup", this.scaleEnd);
      this.$root.$el.style.cursor = "default";
    },
    moveStart(e) {
      if (!this.canDrag) return;
      if (this.nowIsMax) return;
      console.log(1);

      this.startX = e.clientX;
      this.startY = e.clientY;
      this.offsetX = this.$el.offsetLeft;
      this.offsetY = this.$el.offsetTop;
      this.$root.$el.addEventListener("mousemove", this.moveHandler);
      this.$root.$el.addEventListener("mouseup", this.moveEnd);
    },
    moveHandler(e) {
      let distanceX = e.clientX - this.startX;
      let distanceY = e.clientY - this.startY;
      this.$el.style.setProperty(
        "--window-left",
        `${this.offsetX + distanceX}px`
      );
      this.$el.style.setProperty(
        "--window-top",
        `${this.offsetY + distanceY}px`
      );
      this.$emit("move");
    },
    moveEnd() {
      this.$root.$el.removeEventListener("mousemove", this.moveHandler);
      this.$root.$el.removeEventListener("mouseup", this.moveEnd);
    },
    //min maxHandler删除了它们接受的参数e，不然无法启动
    minHandler() {
      this.selectThis();
      if (this.nowIsMax) return;
      this.nowIsMin = !this.nowIsMin;
      if (!this.nowIsMin) {
        this.$el.style.transition = "height 0.2s ease-in-out";
        setTimeout(() => {
          this.$el.style.transition = "";
        }, 200);
      }
    },
    maxHandler() {
      this.selectThis();
      this.nowIsMax = !this.nowIsMax;
      if (!this.nowIsMax) {
        this.$el.style.transition =
          "height 0.2s ease-in-out, width 0.2s ease-in-out, top 0.2s ease-in-out, left 0.2s ease-in-out";
        setTimeout(() => {
          this.$el.style.transition = "";
        }, 200);
      }
      setTimeout(() => {
        this.$emit("resize");
      }, 200);
    },
    closeHandler() {
      this.show = false;
      this.$emit("close");
    },
    getStatus() {
      return this.show;
    },
    open() {
      if (this.getStatus()) return this.selectThis();
      this.show = true;
      this.$nextTick(() => {
        this.initWindowStyle();
      });
      this.$emit("open");
    },
    close() {
      this.closeHandler();
    },
  },
};
</script>

<style lang="scss" scoped>
.cc-window {
  --header-height: 36px;
  --window-width: 300px;
  --window-height: 400px;
  --window-top: 100px;
  --window-left: 100px;
  --window-bottom: unset;
  --window-right: unset;
  z-index: 1;
  position: fixed;
  width: var(--window-width);
  height: var(--window-height);
  top: var(--window-top);
  left: var(--window-left);
  bottom: var(--window-bottom);
  right: var(--window-right);
  border: 1px solid #0099ff90;
  color: #efefef;
  background-color: rgba(1, 20, 47, 0.75);
  &.showFront {
    z-index: 2;
  }
  .header-box {
    display: flex;
    align-items: center;
    height: var(--header-height);
    border-bottom: 1px solid #0099ff90;
    padding: 0 6px;
    cursor: move;
    .header-icon {
      height: 24px;
      width: 24px;
      background-image: url("~@/assets/images/dialog/icon.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }
    .title {
      padding: 0 5px;
      flex: 1;
      font-weight: 700;
      text-shadow: 0 0 5px aqua;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .header-btns {
      [class^="el-icon-"] {
        width: 22px;
        height: 22px;
        text-align: center;
        line-height: 22px;
        cursor: pointer;
        &:hover {
          background-color: #efefef30;
        }
        &:active {
          background-color: #efefef10;
        }
      }
    }
  }
  .content {
    height: calc(100% - var(--header-height));
    overflow-y: auto;
    overflow-x: hidden;
  }
  .scale-line {
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: transparent;
    &.top,
    &.bottom {
      width: 100%;
      left: 0;
      top: -2px;
      cursor: ns-resize;
    }
    &.bottom {
      top: unset;
      bottom: -2px;
    }
    &.left,
    &.right {
      height: 100%;
      top: 0;
      left: -2px;
      cursor: ew-resize;
    }
    &.right {
      left: unset;
      right: -2px;
    }
  }
  .corner {
    position: absolute;
    width: 8px;
    height: 8px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    &.t-l {
      top: -4px;
      left: -4px;
      background-image: url("~@/assets/images/dialog/c-tl.png");
    }
    &.t-r {
      top: -4px;
      right: -4px;
      background-image: url("~@/assets/images/dialog/c-tr.png");
    }
    &.b-l {
      bottom: -4px;
      left: -4px;
      background-image: url("~@/assets/images/dialog/c-bl.png");
    }
    &.b-r {
      bottom: -4px;
      right: -4px;
      background-image: url("~@/assets/images/dialog/c-br.png");
    }
  }
  &.window-min-class {
    height: var(--header-height) !important;
    transition: height 0.2s ease-in-out;
  }
  &.window-max-class {
    height: calc(100% - 10px) !important;
    width: calc(100% - 10px) !important;
    top: 5px !important;
    left: 5px !important;
    z-index: 999;
    transition: height 0.2s ease-in-out, width 0.2s ease-in-out,
      top 0.2s ease-in-out, left 0.2s ease-in-out;
  }
}
</style>
